{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

{{#if @dataset}}
  <svg
    data-test-horizontal-bar-chart
    class="chart is-horizontal"
    {{on "mouseleave" this.removeTooltip}}
    {{did-insert this.renderChart @dataset}}
    {{did-update this.renderChart @dataset}}
  >
  </svg>
{{else}}
  <EmptyState @subTitle={{or @noDataMessage "No data to display"}} @bottomBorder={{true}} />
{{/if}}
{{#if this.tooltipTarget}}
  {{! Required to set tag name = div https://github.com/yapplabs/ember-modal-dialog/issues/290 }}
  {{! Component must be in curly bracket notation }}
  {{! template-lint-disable no-curly-component-invocation }}
  {{#modal-dialog
    tagName="div" tetherTarget=this.tooltipTarget targetAttachment="bottom middle" attachment="bottom middle" offset="35px 0"
  }}
    <div class="chart-tooltip {{if this.isLabel ' is-label-fit-content'}}">
      {{#each this.tooltipText as |text|}}
        <p>{{text}}</p>
      {{/each}}
    </div>
    <div class="chart-tooltip-arrow"></div>
  {{/modal-dialog}}
{{/if}}